<template>
  <view>
    <view class="feedback">
      <u-input v-model="content" type="textarea" :border="true" height="470" :auto-height="true" @input="descInput"
               :focus="true" maxlength="500" placeholder="输入您的意见/反馈将会使我们把服务做的更好。"/>
      <view class="numberV">{{ txtVal }}/500</view>
    </view>
    <view class="img-list">
      <u-upload :action="action" ref="uUpload" :header="header" :auto-upload="true" @on-success="uploadSuccess"
                show-progress="false" max-count="3" width="200" height="150" del-bg-color="#8e8e8e"
                del-color="#ffffff"></u-upload>
    </view>

    <view>
      <view class="submit__btn" @click="submit">
        提交
      </view>
    </view>
    <view>
      <u-modal v-model="showSuccess" @confirm="btnSuccess">
        <view class="subSuccess">提交成功</view>
      </u-modal>
    </view>
    <u-toast ref="uToast"/>
    <w-loading text="正在提交..." mask="true" click="true" ref="loading"></w-loading>

  </view>
</template>

<script>
import {feedback} from "../../api/shop";

import __config from '../../config/env.js'

export default {
  data() {
    return {
      content: "",
      txtVal: 0,
      pics: [],      // 预览列表
      showSuccess: false,
      btnCss: false,
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        'Authorization': uni.getStorageSync('token')
      },
      picspush: [],
      action: __config.action,

    };
  },
  methods: {
    submit() {
      this.$refs.loading.open()
      if (this.desc == '') {
        this.$refs.uToast.show({
          title: '请输入意见反馈内容',
          type: 'error',
        })
      } else {
        let data = {
          content: this.content,
          picsList: this.pics
        }
        feedback(data).then(res => {
          this.$refs.loading.close()
          this.content = ''
          this.pics = []
          this.showSuccess = true
        }).catch(err =>{
          this.$refs.loading.close()

        })
      }

    },
    descInput(e) {
      this.txtVal = this.content.length;
    },

    //选中图片成功后的回调
    uploadSuccess(data, index, lists, name) {
      this.pics.push(data.data.url)
    },
    /**
     * 图片  视频 选择框
     */
    // 点击调用手机相册/拍照
    btnSuccess() {
      uni.switchTab({
        url: '/pages/home/index'
      })
    }
  }
}
</script>

<style lang="scss">
.feedback {
  width: 90%;
  margin: 20rpx auto 0;
  height: 470rpx;
}

.numberV {
  position: relative;
  text-align: right;
  bottom: 42rpx;
  right: 18rpx;
  color: #c3c4c2;
  font-size: 24rpx;
}

/* 上传的图片 */

.img-list {
  width: 90%;
  margin: 40rpx auto;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 7px;
}

.img-li {
  width: 203rpx;
  height: 152rpx;
  margin-right: 22rpx;
}

.subSuccess {
  display: flex;
  justify-content: center;
}

.img-li image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.icon-delete {
  width: 50rpx !important;
  height: 50rpx !important;
  position: relative;
  right: -155rpx;
  top: -150rpx;
  z-index: 99;
}

.icon-deletes {
  width: 40rpx !important;
  height: 40rpx !important;
  position: relative;
  right: 47rpx;
  top: -165rpx;
  z-index: 99;
}

.content-input-z {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999999;
}

.content-input-z {
  margin-top: 31rpx;
}

.content-input-z view image {
  width: 32rpx;
  height: 31rpx;
  margin-right: 11rpx;
}

.content-input-z view {
  display: flex;
  align-items: center;
}


.subSuccess {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150rpx;

}

// 上传图片和视频新的
</style>
